<template>
<div  class="devicebg"  >

<el-row :gutter="10"   >
 <el-col :span="9">
  <el-scrollbar :native="false"  wrapClass="selfbar" style="height: 100%; ">
        <table style="margin: 0 auto;width: 390px;">
            <tr>
                <td style="padding: 5px;width: 140px">设备IP</td>
                <td style="padding: 5px">
                    <el-tag :title="form.ip"
                            style="width: 230px;overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
                            size="medium"> {{form.ip}}
                    </el-tag>
                </td>
            </tr>
            <tr>
                <td style="padding: 5px">设备类型</td>
                <td style="padding: 5px">
                    <el-tag :title="form.typeName"
                            style="width: 230px;overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
                            size="medium"> {{form.typeName}}
                    </el-tag>
                </td>
            </tr>
            <tr>
                <td style="padding: 5px">设备运行时长</td>
                <td style="padding: 5px">
                    <el-tag :title="form.sysUpTime"
                            style="width: 230px;overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
                            size="medium"> {{form.sysUpTime}}
                    </el-tag>
                </td>
            </tr>
            <tr>
                <td style="padding: 5px">设备联系人</td>
                <td style="padding: 5px">
                    <el-tag :title="form.sysContact"
                            style="width: 230px;overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
                            size="medium"> {{form.sysContact}}
                    </el-tag>

                </td>
            </tr>
            <tr>
                <td style="padding: 5px">设备机器名</td>
                <td style="padding: 5px">
                    <el-tag :title="form.sysName"
                            style="width: 230px;overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
                            size="medium"> {{form.sysName}}
                    </el-tag>
                </td>
            </tr>
            <tr>
                <td style="padding: 5px">设备型号</td>
                <td style="padding: 5px">
                    <el-tag :title="form.sysDecsr"
                            style="width: 230px;overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
                            size="medium">{{form.sysDecsr}}
                    </el-tag>
                </td>
            </tr>
            <tr>
                <td style="padding: 5px">设备名称</td>
                <td style="padding: 5px">

                    <el-tag :title="form.name"
                            style="width: 230px;overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
                            size="medium"> {{form.name}}
                    </el-tag>
                </td>
            </tr>
            <tr>
                <td style="padding: 5px">设备位置</td>
                <td style="padding: 5px">
                    <el-tag :title="form.sysLocation"
                            style="width: 230px;overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
                            size="medium"> {{form.sysLocation}}
                    </el-tag>
                </td>
            </tr>
            <tr>
                <td style="padding: 5px">描述</td>
                <td style="padding: 5px">
                    <el-tag :title="form.selfDecs"
                            style="width: 230px;overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
                            size="medium"> {{form.selfDecs}}
                    </el-tag>
                </td>
            </tr>
        </table>
  </el-scrollbar>
  </el-col>
  <el-col :span="15">
    <div style="margin-top:20px;margin-left: 30px;">
      <el-row :gutter="10">
      <el-col :span="24">
          <div id="cpudiv" :style="cpustyle"  >cpudiv1</div>
          <div id="memorydiv" :style="memorystyle">memorydiv1</div>
      </el-col> 
      </el-row>
    </div>
  </el-col>
 </el-row>
<div></div>
<el-row :gutter="10" style="margin-bottom: 5px;">
    <el-col :span="24"> 
        
    <div id="flow"  >
        <el-table
                size="small"
                :data="ifFlow"
                border
                height="200"
                style="width: 100%"
                class="custom-table"
                stripe>
            <el-table-column
                    prop="interDescr"
                    label="端口描述">
            </el-table-column>
          <el-table-column sortable  prop="ifindex" label="端口序号">
          </el-table-column>
            <el-table-column
                    prop="inFlow"
                    label="接收流量kb/s">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="outFlow"
                    label="发送流量kb/s">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="inRate"
                    label="接收占比率(%)">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="outRate"
                    label="发送占比率(%)">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="inLoss"
                    label="接收丢包率(%)">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="outLoss"
                    label="发送丢包率(%)">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="inErrorRate"
                    label="接收错误率(%)">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="outErrorRate"
                    label="发送错误率(%)">
            </el-table-column>

        </el-table>
    </div>
    </el-col>
</el-row>
<el-row :gutter="10"  style="margin-bottom: 5px;">
    <el-col :span="24"> 
    <div id="inter"  >
        <el-table
                size="small"
                :data="ifData"
                border
                height="200"
                style="width: 100%"
                stripe>
            <el-table-column
                    prop="ifDescr"
                    label="名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="ifOperStatus"
                    label="操作状态(线路状态)">
            </el-table-column>
            <el-table-column
                    prop="ifAdminStatus"
                    label="管理状态">
            </el-table-column>
            <el-table-column
                    prop="ifSpeed"
                    label="带宽(字节)">
            </el-table-column>
            <el-table-column
                    prop="ifMtu"
                    label="MTU">
            </el-table-column>
        </el-table>
    </div>
    </el-col>
</el-row>

</div>
</template>
<script>
import { getSystem } from "@/api/snmp/system";
import { getMemoryByIp } from "@/api/snmp/memory";
import { getCpubyIp } from "@/api/snmp/cpu";
import { getInterfacebyIp } from "@/api/snmp/interface";
import { getInterflowbyIp } from "@/api/snmp/interflow";

import * as echarts from "echarts";

export default {
  name: "snmpdevice", 
  props: ['detailData'],
  data() {
    return {
        deviceip: '',
        form: {},
        ifFlow: [],
        ifData: [],
        cpuchart: '',
        cpuData: {
            cpuRate: [],
            time: [],
        },
        cpuoption: {
            title: {
                subtext: '若数值<0则设备SNMP服务未启用',
                subtextStyle : {
                    color:'white'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                },
                textStyle:{
                    // fontSize:18
                color:'#ADFF2F'
                },
                formatter: ' {b}<br/>{a} : {c} %'
            },
            legend: {
                data: ['CPU使用率'],
                textStyle:{
                color:'white'
                    // fontSize:18
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    saveAsImage: {}
                }
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: [],
                    axisLabel: { 
                    color:'white' 
                    },
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '使用率%',
                    nameTextStyle:{
                    color:'white'
                    },
                    min: 0,
                    boundaryGap: [0.2, 0.2],
                    axisLabel:{ 
                    color:'white' 
                    }
                }
            ],
            series: [
            {
                name: 'CPU使用率',
                type: 'line',
                data: [],
                smooth: true,
                areaStyle: {},
                label: {
                    show: true,
                    color: 'yellow'
                },
                }
            ]
        },
        memchart: '',
        memData:{
            memRate:[],
            time:[],
        },
        memoption:{
            title:{
                subtext:'若数值<0则设备SNMP服务未启用',
                subtextStyle : {
                color:'white'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                },
                textStyle:{
                color:'#ADFF2F'
                },
                formatter: ' {b}<br/>{a} : {c} %'
            },
            legend: {
                data: ['内存使用率'],
                textStyle:{
                color:'white'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    saveAsImage: {}
                }
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: [],
                    axisLabel: { 
                    color:'white' 
                    },
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '使用率%',
                    nameTextStyle:{
                    color:'white'
                    },
                    min: 0,
                    boundaryGap: [0.2, 0.2],
                    axisLabel:{ 
                    color:'white' 
                    }
                }
            ],
            series: [
                {
                    name: '内存使用率',
                    type: 'line',
                    data: [],
                    smooth: true,
                    areaStyle: {},
                    label: {
                    show: true,
                    color: 'yellow'
                    },
                }
            ]
        }
    };
  },
  created() {
    this.initBase();
  },
  methods: {
    reset() {
        this.form = {
          id: null,
          ip: null,
          sysDecsr: null,
          sysObjectID: null,
          sysUpTime: null,
          sysContact: null,
          sysName: null,
          sysLocation: null,
          sysService: null,
          selfDecs: null,
          typeName: null,
          name: null,
          icon: null,
          time: null,
          community: null,
          version: null
        };
        this.resetForm("form");
      },
    initBase() {
      // 加载数据 
      //const urlParams = new URLSearchParams(window.location.search);
      const ip =this.detailData;// urlParams.get('id'); // 获取名为'id'的查询参数值  

      getSystem(ip).then(response => {
      debugger;
        this.form = response.data; 
        this.deviceip=this.form.ip; 
        if(this.deviceip.length>8){
            this.initCpu();
            this.initMem();
            this. initif();
            this.initFlow();
            }
      });
    },
    initCpu(){
    //cpu使用率
      getCpubyIp(this.deviceip).then(response => {
        this.cpuData = response.data; 
        this.initDataCpu(this.cpuData);
      });
      // this.getRequest("/monitor/cpu/" + this.ip).then(res => {
    },
    initMem(){  //内存使用率
      getMemoryByIp(this.deviceip).then(response => {
          this.memData = response.data; 
          this.initDataMem(this.memData); 
      });
      //this.getRequest("/memory/five/"+this.ip).then(res=>{ 
    },
    initDataMem(obj) { 
        this.memchart = echarts.init(document.getElementById("memorydiv"));
        this.memoption.xAxis[0].data=[];
        this.memoption.series[0].data=[];
        for (let i = obj.length-1; i>=0;i--) {
            this.memoption.xAxis[0].data.push(obj[i].time);
            this.memoption.series[0].data.push(obj[i].memRate);
        }
  debugger;
        this.memchart.setOption(this.memoption,true);
        //window.addEventListener("resize", this.memchart.resize);
    },
    initDataCpu(obj) { 
        this.cpuchart = echarts.init(document.getElementById("cpudiv"));
        this.cpuoption.xAxis[0].data = [];
        this.cpuoption.series[0].data = [];
        for (let i = obj.length - 1; i >= 0; i--) {
            this.cpuoption.xAxis[0].data.push(obj[i].time);
            this.cpuoption.series[0].data.push(obj[i].cpuRate);
        }
        this.cpuchart.setOption(this.cpuoption, true);
        //window.addEventListener("resize", this.cpuchart.resize);
    },
    initif(){
    getInterfacebyIp(this.deviceip).then(response => {
    
  debugger;
        var res = response.data;   
            for (let i in res) {
                if (res[i].ifOperStatus === "1") {
                res[i].ifOperStatus = '开启'
                } else {
                res[i].ifOperStatus = '关闭'
                }
                if (res[i].ifAdminStatus === "1") {
                res[i].ifAdminStatus = '开启'
                } else {
                res[i].ifAdminStatus = '关闭'
                }
            }
            this.ifData = res;
        })
    },
    initFlow(){
        getInterflowbyIp(this.deviceip).then(response => {
  debugger; 
            this.ifFlow = response.data;
        })
    }
  },
  computed: {
      cpustyle() {
          return {
              height: '200px',
              width: '600px'
          }
      },
      memorystyle() {
          return {
              height: '200px',
              width: '600px'
          }
      }
  }
};

</script>
<style rel="stylesheet/scss" lang="scss">
.devicebg {  
  justify-content: center;
  align-items: center; 
  background-image: url("../../../assets/images/home_bg.png"); 
  background-size: cover;
  color:white;
}
</style>